{% extends 'header.html' %}

{% block content %}
    <!-- ===============  breadcrumb area start =============== -->
    <div class="breadcrumb-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12">
                    <div class="breadcrumb-wrap">
                        <h2>{{ obj.sname }}</h2>
                        <ul class="breadcrumb-links">
                            <li>
                                <a href="/index/">主页</a>
                                <i class="bx bx-chevron-right"></i>
                            </li>
                            <li>景点详情</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- ===============  breadcrumb area end =============== -->

    <div class="package-details-wrapper pt-120">
        <div class="container">
            <div class="row">
                <div class="col-lg-8">
                    <div class="package-details">
                        <div class="package-thumb">
                            <img src="/media/{{ obj.image }}" alt="">
                        </div>
                        <div class="package-header">
                            <div class="package-title">
                                <h3>{{ obj.sname }}</h3>
                                <strong><i class="flaticon-arrival"></i>
                                    {{ obj.province }}
                                </strong>
                            </div>
                            <div class="pd-review">
                                <p>{{ obj.get_level_display }}</p>
                                <ul>
                                    <li><i class='bx bxs-star'></i></li>
                                    <li><i class='bx bxs-star'></i></li>
                                    <li><i class='bx bxs-star'></i></li>
                                    <li><i class='bx bxs-star'></i></li>
                                    <li><i class='bx bxs-star'></i></li>
                                </ul>
                                <!-- <p>800 Review</p> -->
                            </div>
                        </div>
                        <div class="p-short-info">
                            <div class="single-info">
                                <i class="flaticon-clock"></i>
                                <div class="info-texts">
                                    <strong>开放时间</strong>
                                    <p>{{ obj.opentime }}</p>
                                </div>
                            </div>
                            <div class="single-info">
                                <i class="flaticon-footprints"></i>
                                <div class="info-texts">
                                    <strong>适合时间</strong>
                                    <p>四季</p>
                                </div>
                            </div>
                            <div class="single-info">
                                <i class="flaticon-traveller"></i>
                                <div class="info-texts">
                                    <strong>适合人数</strong>
                                    <p>任意</p>
                                </div>
                            </div>
                            <div class="single-info">
                                <i class="flaticon-translate"></i>
                                <div class="info-texts">
                                    <strong>语言</strong>
                                    <p>中文</p>
                                </div>
                            </div>
                        </div>
                        <div class="package-tab">
                            <ul class="nav nav-pills" id="pills-tab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
                                            data-bs-target="#pills-home" type="button" role="tab"
                                            aria-controls="pills-home" aria-selected="true"><i
                                            class="flaticon-info"></i>
                                        基本信息
                                    </button>
                                </li>
                            </ul>
                            <div class="tab-content p-tab-content" id="pills-tabContent">
                                <h5>{{ obj.introduce }}</h5>
                            </div>
                            <div class="col-lg-6">
                                <div class="contact-form">
                                    <form method="post" enctype="multipart/form-data" novalidate>
                                        {% csrf_token %}
                                        <h5 class="contact-d-head">评论</h5>
                                        <div class="row">
                                            {% for field in form %}
                                                <div class="col-lg-6">
                                                    {{ field }}
                                                    <span style="color: red;">{{ field.errors.0 }}</span>
                                                </div>
                                            {% endfor %}
                                            <div class="col-lg-12">
{#                                                <input type="submit" value="提交留言">#}
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4">
                    <div class="package-d-sidebar">
                        <div class="row">
                            <div class="col-lg-12 col-md-6">
                                <div class="p-sidebar-form">
                                    <form enctype="multipart/form-data" method="post" novalidate>
                                        {% csrf_token %}
                                        <h5 class="package-d-head">预订门票</h5>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <input type="text" name="bookname" placeholder="预约姓名"
                                                       required="required">
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="email" name="email" placeholder="邮箱" required="required">
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="text" name="phone" id="inputs" placeholder="手机号"
                                                       required="required">
                                                <span id="spans"></span>
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="date" name="booktime" placeholder="预约时间" id="time"
                                                       required="required">
                                            </div>
                                            <div class="col-lg-12">
                                                <select name="type">
                                                    {% for item in type_choices %}
                                                        <option value="{{ item.0 }}">{{ item.1 }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="text" name="description" placeholder="备注"
                                                       required="required">
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="hidden" name="sceid" value="{{ obj.id }}">
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="hidden" name="uid" value="{{ request.session.info.id }}">
                                            </div>
                                            <div class="col-lg-12">
                                                <input type="submit" id="button1" value="提交预约">
                                            </div>
                                        </div>
                                    </form>
                                </div>
                            </div>


                            <div class="col-lg-12 col-md-6">
                                <div class="p-sidebar-banner mt-40">
                                    <img src="/static/picture/sidebar-banner.png" alt="" class="img-fluid">
                                    <div class="sidebar-banner-overlay">
                                        <div class="overlay-content">
                                            <h3>等您来探索你想去的地方</h3>
                                            <div class="sidebar-banner-btn">
                                                <a href="#"></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script>
        //input date 限制选择的时间，只能选择之后的时间
        $(function () {
            //得到明天时间
            const t = new Date(new Date().getTime() + 86400000);
            //得到当前年份
            var year = t.getFullYear();
            //得到当前月份
            //注：
            //  1：js中获取Date中的month时，会比当前月份少一个月，所以这里需要先加一
            //  2: 判断当前月份是否小于10，如果小于，那么就在月份的前面加一个 '0' ， 如果大于，就显示当前月份
            var month = t.getMonth() + 1 < 10 ? "0" + (t.getMonth() + 1) : (t.getMonth() + 1);

            // 明天多少号

            const torr = t.getDate() < 10 ? "0" + t.getDate() : t.getDate();

            //设置input标签的min属性 从明天选择之后的日期，max最大，只能选择之前的日期
            $("#time").attr("min", year + "-" + month + "-" + torr);
        })
    </script>

{% endblock %}